<template>
  <a-space direction="vertical" :style="{ width: '96%',margin: '20px' }" :size="[0, 48]">
    <a-layout style="    margin-bottom: calc(100vh /6); background-color: white;">
     <a-layout>
		 <a-layout-sider>
		 		  <a-layout>
		 		    <a-layout-content :style="contentStyle">
		 				<div >
		 				    <a-form
		 				      ref="formRef"
		 				      name="advanced_search"
		 				      class="ant-advanced-search-form"
		 				      :model="formState"
		 				      @finish="onFinish"
							 
		 				    >
		 				      <a-row :gutter="24">
		 				          <a-col :span="20">
		 				            <a-form-item>
		 				              <a-input value=""  name="key" placeholder="输入关键字搜索"></a-input>
		 				            </a-form-item>
		 				          </a-col>
		 				        <a-col :span="4" style="text-align: right">
		 				          <SyncOutlined style="    vertical-align: middle;"/>
		 				        </a-col>
		 				      </a-row>
		 				    </a-form>
		 				    <div style="    line-height: 0;text-align: left;">
		 						<a-space wrap style="    margin-bottom: 0px;">
		 							 <a-typography-text>待诊患者</a-typography-text>
		 						    <a-button type="link" block>本人</a-button>
		 							  <a-button type="link" block>本科</a-button>
		 						  </a-space>
		 						<a-table
		 						    :columns="fixedColumns"
		 						    :data-source="fixedData"
		 						    :pagination="false"
		 							 :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
		 						    :scroll="{ x:500, y: 200 }"
		 						    bordered
		 						  >
		 						  </a-table>
		 					</div>
		 				  </div>
		 			</a-layout-content>
		 			<a-layout-content :style="contentStyle">
		 				<div style="margin-top: 20px;">
		 				    <a-form
		 				      ref="formRef"
		 				      name="advanced_search"
		 				      class="ant-advanced-search-form"
		 				      :model="formState"
		 				      @finish="onFinish"
		 				    >
		 				      <a-row :gutter="24">
		 				          <a-col :span="20">
		 				            <a-form-item>
		 				              <a-input value=""  name="key" placeholder="输入关键字搜索"></a-input>
		 				            </a-form-item>
		 				          </a-col>
		 				        <a-col :span="4" style="text-align: right">
		 				          <SyncOutlined style="    vertical-align: middle;"/>
		 				        </a-col>
		 				      </a-row>
		 				    </a-form>
		 				    <div style="    line-height: 0;text-align: left;margin-bottom: 20px;">
		 						<a-space wrap style="    margin-bottom: 0px;">
		 							 <a-typography-text>待诊患者</a-typography-text>
		 						    <a-button type="link" block>本人</a-button>
		 							  <a-button type="link" block>本科</a-button>
		 						  </a-space>
		 						<a-table
		 						    :columns="fixedColumns"
		 						    :data-source="fixedData"
		 						    :pagination="false"
		 							 :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
		 						    :scroll="{ x:500, y: 200 }"
		 						    bordered
		 						  >
		 						  </a-table>
		 					</div>
		 				  </div>
		 			</a-layout-content>
		 		  </a-layout>
		 </a-layout-sider>
        <a-layout-content :style="contentStyle">
			 <div style="margin-left: 20px;;">
			    <a-form
			      ref="formRef"
			      name="advanced_search"
			      class="ant-advanced-search-form"
			      :model="formState"
			      @finish="onFinish"
				   style="width: 95%;"
			    >
			      <a-row :gutter="24">
			        <template v-for="i in 10" :key="i">
			          <a-col :span="8">
			            <a-form-item
			              :name="`field-${i}`"
			              :label="`field-${i}`"
			              :rules="[{ required: true, message: 'input something' }]"
			            >
			              <a-input  placeholder="placeholder"></a-input>
			            </a-form-item>
			          </a-col>
			        </template>
			      </a-row>
			    </a-form>
			    <div>
					 <a-tabs v-model:activeKey="activeKey" >
					    <a-tab-pane key="1" tab="门诊病例" style="overflow-y: auto;height: 420px;">
							  <a-page-header title="门诊病例内容" />
									  <!-- 门诊病例div -->
									  <a-form
									    ref="formRef"
									    name="advanced_search"
									    class="ant-advanced-search-form"
									    :model="formState"
									    @finish="onFinish"
										style="width: 95%;"
									  >
									    <a-row :gutter="24">
									      <template v-for="i in 10" :key="i">
									        <a-col :span="8">
									          <a-form-item
									            :name="`field-${i}`"
									            :label="`field-${i}`"
									            :rules="[{ required: true, message: 'input something' }]"
									          >
									            <a-input  placeholder="placeholder"></a-input>
									          </a-form-item>
									        </a-col>
									      </template>
									    </a-row>
									  </a-form>
						</a-tab-pane>
					    <a-tab-pane key="2" tab="门诊处方" style="overflow-y: auto;height: 420px;">
							<a-page-header title="门诊处方内容" />
							<!-- 门诊处方div -->
							<a-form
							  ref="formRef"
							  name="advanced_search"
							  class="ant-advanced-search-form"
							  :model="formState"
							  @finish="onFinish"
							  
							  style="width: 95%;"
							>
							  <a-row :gutter="24">
							    <template v-for="i in 20" :key="i">
							      <a-col :span="8">
							        <a-form-item
							          :name="`field-${i}`"
							          :label="`field-${i}`"
							          :rules="[{ required: true, message: 'input something' }]"
							        >
							          <a-input  placeholder="placeholder"></a-input>
							        </a-form-item>
							      </a-col>
							    </template>
							  </a-row>
							</a-form>
						</a-tab-pane>
					    <a-tab-pane key="3" tab="检验报告" style="overflow-y: auto;height: 420px;">
							<a-page-header title="检验报告内容" />
							<!--检验报告div -->
							<a-form
							  ref="formRef"
							  name="advanced_search"
							  class="ant-advanced-search-form"
							  :model="formState"
							  @finish="onFinish"
							  
							  style="width: 95%;"
							>
							  <a-row :gutter="24">
							    <template v-for="i in 15" :key="i">
							      <a-col :span="8">
							        <a-form-item
							          :name="`field-${i}`"
							          :label="`field-${i}`"
							          :rules="[{ required: true, message: 'input something' }]"
							        >
							          <a-input  placeholder="placeholder"></a-input>
							        </a-form-item>
							      </a-col>
							    </template>
							  </a-row>
							</a-form>
							
						</a-tab-pane>
						 <a-tab-pane key="4" tab="检查报告" style="overflow-y: auto;height: 420px;">
							 <a-page-header title="检查报告内容" />
							 <!--检查报告div -->
							 <a-form
							   ref="formRef"
							   name="advanced_search"
							   class="ant-advanced-search-form"
							   :model="formState"
							   @finish="onFinish"
							   
							   style="width: 95%;"
							 >
							   <a-row :gutter="24">
							     <template v-for="i in 30" :key="i">
							       <a-col :span="8">
							         <a-form-item
							           :name="`field-${i}`"
							           :label="`field-${i}`"
							           :rules="[{ required: true, message: 'input something' }]"
							         >
							           <a-input  placeholder="placeholder"></a-input>
							         </a-form-item>
							       </a-col>
							     </template>
							   </a-row>
							 </a-form>
							 
						 </a-tab-pane>
					  </a-tabs>
				</div>
			  </div>
		</a-layout-content>
      </a-layout>
	<a-layout-footer :style="footerStyle">
		  <a-divider />
		<!-- 底部栏 -->
		 <a-typography-text style="color: red;float: left;">医疗费总额：17元</a-typography-text>
		<a-flex wrap="wrap" gap="small" style="    float: right;">
		    <a-button type="primary">门诊转住院</a-button>
		    <a-button type="primary">暂存处方</a-button>
		    <a-button type="primary">发送处方</a-button>
			</a-flex>
	</a-layout-footer>
    </a-layout>
  </a-space>
</template>
<script lang="ts" setup>
import type { CSSProperties } from 'vue';
import { reactive, ref,computed } from 'vue';
import type { FormInstance,TableColumnsType } from 'ant-design-vue';
import {SyncOutlined} from '@ant-design/icons-vue';
type Key = string | number;
const activeKey = ref('1');

const formRef = ref<FormInstance>();
const formState = reactive({});
const fixedColumns = ref<TableColumnsType>([
  {
    title: '姓名',
    dataIndex: 'name',
    fixed: false,
    width: 100,
	resizable:true
  },
  {
    title: '性别',
    dataIndex: 'description',
	 width: 100,
	 resizable:true
  }, 
  {
    title: '年龄',
    dataIndex: 'age',
	 width: 100,
	 resizable:true
  },
  {
    title: '就诊序号',
    dataIndex: 'no',
	 width: 100,
	 resizable:true
  },
  {
    title: '等等',
    dataIndex: 'no1',
	 width: 100,
	 resizable:true
  },
]);

const fixedData = ref<{ key: number; name: string; description: string; age: string ; no: string; no1: string  }[]>([]);
for (let i = 0; i < 20; i += 1) {
  fixedData.value.push({
    key: i,
    name: '张三',
    description: '男',
	age: '20',
	no: '10',
	no1: '其他'
  });
}
const state = reactive<{
  selectedRowKeys: Key[];
  loading: boolean;
}>({
  selectedRowKeys: [], // Check here to configure the default column
  loading: false,
});
const hasSelected = computed(() => state.selectedRowKeys.length > 0);

const onSelectChange = (selectedRowKeys: Key[]) => {
  console.log('selectedRowKeys changed: ', selectedRowKeys);
  state.selectedRowKeys = selectedRowKeys;
};

const onFinish = (values: any) => {
  console.log('Received values of form: ', values);
  console.log('formState: ', formState);
};

const headerStyle: CSSProperties = {
  textAlign: 'center',
  color: '#fff',
  height: 64,
  paddingInline: 50,
  lineHeight: '64px',
  backgroundColor: 'white',
};

const contentStyle: CSSProperties = {
  textAlign: 'center',
  minHeight: 120,
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: 'white',
};

const footerStyle: CSSProperties = {
  textAlign: 'center',
  color: '#fff',
  backgroundColor: 'white',
  position:'fixed',
  zIndex:0,
  width:'100%',
  left:0,
  bottom:0
};
</script>
<style scoped>
.ant-layout-sider {
  width: 400px!important;
  min-width:400px!important;
  max-width:400px!important;
  flex:0 0 400px!important;
  
}
</style>


